<template>
  <view>
    <view class="wrap" :style="Height">
      <view class="u-tabs-box" style="border-bottom: 2rpx solid #f6f6f6;">
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" gutter="35"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="u-flex">
                <view class="u-flex-1">我已邀请好友</view>
                <view class="list-item_t">共2位</view>
              </view>
              <view class="list-item" v-for="(item,index) in 16" :key="index">
                <view class="list-item__container">
                  <view class="list-item__header">
                    <view class="list-item__icon">
                      <view class="list-item__icon-img">
                        <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
                      </view>
                    </view>
                  </view>
                  <view class="list-item__content list-item__content--center">
                    <text class="list-item__content-title">双行标题</text>
                    <text class="list-item__content-note">摘要信息</text>
                  </view>
                  <view class="list-item__extra">
                    <view class="list-item__extra-text">12:21</view>
                  </view>
                </view>
              </view>
              <view style="height: 100rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '全部'
          },
          {
            name: '通过认证'
          },
          {
            name: '未通过认证'
          },
          {
            name: '未提交认证'
          },
          {
            name: '待认证'
          },
        ],
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        activeColor: '#fed500',
        Height:0,
      };
    },
    onLoad() {
      vm = this;
    },

    methods: {
      ClaimCenter(type){
        uni.navigateTo({
        	url: '/pages/Index/ClaimCenter/ClaimCenter?type='+type
        });
      },
      
      reachBottom() {
        
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    width: 100%;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .page-box{
    padding: 32rpx;
  }
  .list-item{
    display: flex;
    font-size: 32rpx;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    flex-direction: row;
    cursor: pointer;
    padding: 32rpx;
    margin-top: 32rpx;
    border-radius: 28rpx;
    .list-item__container{
      position: relative;
      display: flex;
      flex-direction: row;
      flex: 1;
      overflow: hidden;
      .list-item__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        .list-item__icon{
          margin-right: 18rpx;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .list-item__icon-img{
            display: block;
            height: 80rpx;
            width: 80rpx;
            margin-right: 20rpx;
            border-radius: 16rpx;
            overflow: hidden;
          }
        }
      }
      .list-item__content{
        display: flex;
        padding-right: 16rpx;
        flex: 1;
        color: #3b4144;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .list-item__content-title{
          font-size: 28rpx;
          color: #3b4144;
          overflow: hidden;
        }
        .list-item__content-note{
          margin-top: 6rpx;
          color: #999;
          font-size: 24rpx;
          overflow: hidden;
        }
      }
      .list-item__content--center{
        justify-content: center;
      }
      .list-item__extra{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .list-item__extra-text{
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }
  .list-item_t{
    color: $supernut-color;
  }
</style>
